<page-header [action]="phActionTpl">
  <ng-template #phActionTpl></ng-template>
</page-header>

<nz-card>
  <form nz-form (ngSubmit)="search()" class="search__form">
    <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
      <div nz-col nzMd="12" nzSm="24">
        <nz-form-control>
          <span>统计时间：{{ statistics_date }}</span>
        </nz-form-control>
      </div>
      <div nz-col nzMd="12" nzSm="24">
        <nz-form-control>
          <nz-radio-group [(ngModel)]="q.dateType" name="dateType" (ngModelChange)="dateTypeChange($event)">
            <label nz-radio [nzValue]="1">昨日</label>
            <label nz-radio [nzValue]="2">近7天</label>
            <label nz-radio [nzValue]="3">近30天</label>
            <label nz-radio [nzValue]="4">日</label>
            <nz-date-picker
              *ngIf="q.dateType == 4"
              [(ngModel)]="q.dateVal"
              name="dateVal"
              style="margin-right: 24px"
              (ngModelChange)="datePickerChange($event)"
            ></nz-date-picker>
            <label nz-radio [nzValue]="5">月</label>
            <nz-date-picker
              nzMode="month"
              *ngIf="q.dateType == 5"
              name="dateVal"
              [(ngModel)]="q.dateVal"
              (ngModelChange)="datePickerChange($event)"
            ></nz-date-picker>
          </nz-radio-group>
        </nz-form-control>
      </div>
      <nz-divider></nz-divider>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-label nzFor="shopId">店铺</nz-form-label>
          <nz-form-control *ngIf="isAdmin">
            <nz-select
              nzShowSearch
              [(ngModel)]="q.companyId"
              [nzPlaceHolder]="'请选择'"
              name="shopId"
              nzId="shopId"
              (ngModelChange)="companyChange($event)"
            >
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of companyList" [nzLabel]="i['company_name']" [nzValue]="i['ID']"></nz-option>
            </nz-select>
          </nz-form-control>
          <nz-form-control>
            <nz-select nzShowSearch [(ngModel)]="q.shopId" [nzPlaceHolder]="'请选择'" name="shopId" nzId="shopId">
              <nz-option nzLabel="全部" [nzValue]="0"></nz-option>
              <nz-option *ngFor="let i of shops" [nzLabel]="i['fordeal_shop_name']" [nzValue]="i['shop_id']"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzMd="6" nzSm="24">
        <nz-form-item>
          <nz-form-control>
            <nz-select nz-col nzMd="8" nzSm="24" [(ngModel)]="q.skuType" name="skuType" nzId="skuType" [nzPlaceHolder]="'请选择'">
              <nz-option *ngFor="let i of sku_type" [nzLabel]="i.text" [nzValue]="i.index"></nz-option>
            </nz-select>
            <input
              nz-input
              nz-col
              nzMd="16"
              nzSm="24"
              [(ngModel)]="q.skuTypeValue"
              id="skuTypeVal"
              name="skuTypeVal"
              placeholder="请输入"
            />
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col [nzSpan]="8">
        <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading">查询</button>
        <!--        <button nz-button type="reset" (click)="reset()" class="mx-sm">重置</button>-->
      </div>
    </div>
  </form>
  <div nz-row [nzGutter]="{ xs: 8, sm: 8, md: 8, lg: 24, xl: 48, xxl: 48 }">
    <div nz-col nzMd="2" nzSm="4"><p>销售数据</p></div>
    <div nz-col nzMd="22" nzSm="24">
      <nz-checkbox-wrapper style="width: 100%" nz-row>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="A" [(ngModel)]="columns.A">曝光量</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="B" [(ngModel)]="columns.B">曝光点击率</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="C" [(ngModel)]="columns.C">访客数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="D" [(ngModel)]="columns.D">浏览量</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="E" [(ngModel)]="columns.E">加购人数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="F" [(ngModel)]="columns.F">加购件数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="G" [(ngModel)]="columns.G">加购率</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="H" [(ngModel)]="columns.H">下单人数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="I" [(ngModel)]="columns.I">下单件数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="J" [(ngModel)]="columns.J">下单转化率</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="K" [(ngModel)]="columns.K">订单确认人数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="L" [(ngModel)]="columns.L">订单确认件数</label></div>
        <div nz-col nzSpan="3"><label nz-checkbox nzValue="M" [(ngModel)]="columns.M">心愿单（收藏）数</label></div>
      </nz-checkbox-wrapper>
    </div>
  </div>
  <nz-space nzDirection="vertical"></nz-space>
  <nz-table
    [nzScroll]="{ x: scrollX, y: null }"
    #ItemsIndicateTable
    [nzData]="listOfData"
    nzSize="default"
    [nzPageSizeOptions]="[30, 50, 100]"
    [nzLoading]="loading"
    [nzTotal]="total"
    [nzPageSize]="ps"
    [nzPageIndex]="pi"
    [nzFrontPagination]="false"
    [nzShowQuickJumper]="true"
    [nzShowSizeChanger]="true"
    (nzPageIndexChange)="pageIndexChange($event)"
    (nzPageSizeChange)="pageSizeChange($event)"
  >
    <thead>
      <tr>
        <th nzAlign="center" [nzLeft]="true" nzWidth="450px">商品信息</th>
        <th nzAlign="center" *ngIf="columns.A">曝光量</th>
        <th nzAlign="center" *ngIf="columns.B">曝光点击率</th>
        <th nzAlign="center" *ngIf="columns.C">访客数</th>
        <th nzAlign="center" *ngIf="columns.D">浏览量</th>
        <th nzAlign="center" *ngIf="columns.E">加购人数</th>
        <th nzAlign="center" *ngIf="columns.F">加购件数</th>
        <th nzAlign="center" *ngIf="columns.G">加购率</th>
        <th nzAlign="center" *ngIf="columns.H">下单人数</th>
        <th nzAlign="center" *ngIf="columns.I">下单件数</th>
        <th nzAlign="center" *ngIf="columns.J">下单转化率</th>
        <th nzAlign="center" *ngIf="columns.K">订单确认人数</th>
        <th nzAlign="center" *ngIf="columns.L">订单确认件数</th>
        <th nzAlign="center" *ngIf="columns.M">心愿单（收藏）数</th>
        <th nzAlign="center" [nzRight]="true">所属店铺</th>
        <th nzAlign="center" [nzRight]="true">商品添加时间</th>
      </tr>
    </thead>
    <tbody>
      <ng-container *ngFor="let data of ItemsIndicateTable.data">
        <tr>
          <td [nzLeft]="true">
            <nz-comment>
              <nz-comment-content>
                <nz-image [nzWidth]="100" [nzHeight]="100" style="float: left; padding-right: 10px" nzSrc="{{ data['image'] }}"></nz-image>
                <p>{{ data['item_name'] }}</p>
                <p>商品ID: {{ data['item_id'] }}</p>
                <p>商品货号: {{ data['item_no'] }}</p>
              </nz-comment-content>
            </nz-comment>
          </td>
          <td class="text-center" *ngIf="columns.A">{{ data['ctm_item_view_cnt'] }}</td>
          <td class="text-center" *ngIf="columns.B">{{ data['ctm_item_view_rate_new'] * 100 | number: '0.2-2' }}%</td>
          <td class="text-center" *ngIf="columns.C">{{ data['ctm_item_click_uv'] }}</td>
          <td class="text-center" *ngIf="columns.D">{{ data['ctm_item_click_cnt'] }}</td>
          <td class="text-center" *ngIf="columns.E">{{ data['item_cart_uv'] }}</td>
          <td class="text-center" *ngIf="columns.F">{{ data['item_cart_cnt'] }}</td>
          <td class="text-center" *ngIf="columns.G">{{ data['ctm_cart_view_rate'] * 100 | number: '0.2-2' }}%</td>
          <td class="text-center" *ngIf="columns.H">{{ data['item_verified_cnt'] }}</td>
          <td class="text-center" *ngIf="columns.I">{{ data['item_verified_uv'] }}</td>
          <td class="text-center" *ngIf="columns.J">{{ data['ctm_order_view_rate'] * 100 | number: '0.2-2' }}%</td>
          <td class="text-center" *ngIf="columns.K">{{ data['order_uv'] }}</td>
          <td class="text-center" *ngIf="columns.L">{{ data['item_order_cnt'] }}</td>
          <td class="text-center" *ngIf="columns.M">{{ data['item_wishlist_cnt'] }}</td>
          <td class="text-center" [nzRight]="true"
            >{{ shopMap[data['_id']['shop_id']] }}<br />{{ companyMapFull[data['_id']['shop_id']] }}</td
          >
          <td class="text-center" [nzRight]="true">{{ getTime(data['preCreatedAtString']) }}</td>
        </tr>
      </ng-container>
    </tbody>
  </nz-table>
</nz-card>
